<template>
  <section class="card-box card-three" >
      <div class="card-header">
        <CardTitle :title="'今日新闻'" @showCalendar="setOpenPicker" @getFilterInfo="getFilterInfo"></CardTitle>
      </div>

       <div class="card-content">

         <NoData v-if="list.length == 0"></NoData>

          <div class="txt-wrapper" v-for="it,i in list" :key="i">
            <h3 @click="goToNewPage(it.url)">  <span>{{ it.title }}</span> <i class="label-txt" :style="{'background' :(it.emotion== '-1' ? '#E84F4F': it.emotion== '0' ? '#E8A64F':it.emotion== '1'? '#56C980' :'')}">{{it.emotion == "-1" ? "负" : it.emotion == "0" ? "中" : it.emotion
              == "1" ? "正" :" "}}</i></h3>
            <!-- <img /> -->
            <p>{{ it.content }}</p>
            <section class="txt-subtxt">
              <span class="labels-txt">
                 <i v-for="t in it.labels" :key="t.id">{{ t.name }}</i>
              </span>
              <span class="star-box">
                <Star :activeNum="it.star"></Star>
              </span>
            </section>
            <section class="txt-info">
              <span class="info-source">{{it.editor}}</span>
              <span class="info-time">{{ dateFormatMX("YYYY-mm-dd HH:MM:SS",it.publishTime) }}</span>
            </section>
          </div>
       </div>

       <mt-datetime-picker ref="picker" type="date" v-model="pickerValue" @confirm="handleConfirm" class="cdatePicker" year-format="{value} 年" month-format="{value} 月" date-format="{value} 日"></mt-datetime-picker>

       <div class="card-footer">
         <CardFooter></CardFooter>
       </div>

  </section>
</template>

<script>
import CardTitle from '&/components/card-title/index.vue'
import CardFooter from '&/components/card-foot/index.vue'
import Star from '&/components/star-box/index.vue'

import NoData from '@/components/no-data/index.vue'

import { mapState } from 'vuex';

export default {
  name:'wechat-card-three',
  data(){
    return {
      pickerValue: new Date(),
      list: [], // 新闻列表
      params:{
        page: 1,
        size: 500,
        totalNum: 6,
        totalPage: 1,
      },
      pramsAttr:{
        startTime: '',
        endTime: '',
        emotion: '',
        labelIdStr: ''
      }
    }
  },
   created(){
     // this.handleConfirm(new Date().getTime()); // 默认当天筛选
    this.requestNewListApi();
  },  
  mounted(){
    this.initCalcContentHeight();
  },
  methods:{
    initCalcContentHeight(){
      let header = document.querySelector('.card-header');
      let content = document.querySelector('.card-content');
      let footer = document.querySelector('.card-footer');
      let body = document.querySelector('body');

      let spaceHeight = body.clientHeight - header.offsetHeight - footer.offsetHeight;
      content.style.height = (spaceHeight-30) + 'px';
    },
    handleConfirm(v){
      // 重新请求
      this.pramsAttr.startTime = new Date(new Date(new Date(v).toLocaleDateString()).getTime()).getTime(); // 当天0点
      this.pramsAttr.endTime = new Date(new Date(new Date(v).toLocaleDateString()).getTime() + 24 * 60 * 60 * 1000 -1 ).getTime();// 当天23:59
      this.requestNewListApi();
    },
    setOpenPicker(){
      
      // document.querySelector('.v-modal').style.position = 'absolute';
      this.$refs.picker.$el.style.position = 'absolute';
      this.$refs.picker.open();
      let t = setInterval(() => {
        // console.log(this.$refs.picker.$el)
       if(this.$refs.picker.$el.parentNode.getElementsByClassName('v-modal').length > 0){
         this.$refs.picker.$el.parentNode.getElementsByClassName('v-modal')[0].style.display = 'none';
         window.clearInterval(t);
       }
      },30);
    },
    // 获取新闻列表
    requestNewListApi(){
      this.list = []; // 清空列表
      this.axios.get(`${this.serverApi}/news/list`,{
        params: this.pramsAttr
      }).then(res => {
        if(res.data.data){
          this.list = res.data.data.data;

          // 其他参数
          this.params.page = res.data.data.page;
          this.params.size = res.data.data.size;
          this.params.totalNum = res.data.data.totalNum;
          this.params.totalPage = res.data.data.totalPage;

          // console.log(this.list);
          // debugger
        }
      })
    },
    // 获取顶部筛选区域信息
    getFilterInfo(params){
      console.log(params);
      this.pramsAttr.emotion = params.emotion;
      this.pramsAttr.labelIdStr = params.labelIdStr;

      this.requestNewListApi(); // 重新加载
    },
    // 去到新页面
    goToNewPage(url){
      console.log(url);
      window.open(url,Math.random());
    },
  },
  computed:{
    ...mapState(['serverApi','imgApi']),
  },
  components:{
    CardTitle,
    CardFooter,
    Star,
    NoData
  }
}
</script>
<style scoped lang="scss">
  @import "&/assets/css/index.scss";
  
  .card-box{
    width:100%;height:100%;background-color:#fff;position:relative;overflow:hidden;
    /* card-content */
    .card-content{
      width:100%;height:pxToRem(468px);padding-top:pxToRem(10px);background-color:#fff;position:relative;overflow-x:hidden;overflow-y:auto;background: #f5f6fa;-webkit-overflow-scrolling: touch; 
      .txt-wrapper{
        width:96%;height:pxToRem(130px);margin:0 auto;margin-bottom:pxToRem(10px);border-radius:3px;box-sizing:border-box;padding-left:pxToRem(16px);padding-right:pxToRem(16px);background:#fff;
        h3{
            margin:0;font-size:pxToRem(13px);height:pxToRem(40px);line-height:pxToRem(18px);font-weight:600;color:#FCB975;position:relative;white-space: wrap;text-overflow: ellipsis;width:100%;position:relative;top:pxToRem(10px);
            span{width:90%;display:inline-block;overflow: hidden;white-space: wrap;text-overflow: ellipsis;}
            .label-txt{font-size:pxToRem(10px);width:pxToRem(14px);height:pxToRem(14px);text-align:center;line-height:pxToRem(14px);color:#fff;font-style:normal;border-radius:pxToRem(3px);position:absolute;right:0;top:25%;transform:translateY(-50%);}
        }
        p{margin:0;font-size:pxToRem(12px);width:100%;height:pxToRem(36px);line-height:pxToRem(18px);color:#ccc;overflow: hidden;text-overflow:ellipsis;position: relative;top:pxToRem(10px);}
        /* txt-subtxt */
        .txt-subtxt{
          width:100%;display:flex;flex-wrap:nowrap;justify-content: space-between;height:pxToRem(20px);line-height:pxToRem(20px);
          .labels-txt{
            i{
              display: inline-block;font-size:pxToRem(12px);font-style: normal;box-sizing:border-box;height:pxToRem(20px);padding:0px 8px;border:1px solid #e7e7e7;border-radius:5px;color:#bbb;background-color:#fafafa;margin-left:pxToRem(8px);
              &:first-of-type{ margin-left:0; }
            }
          }
        }
        /* txt-info */
        .txt-info{
          width:100%;height:pxToRem(22px);line-height:pxToRem(22px);font-size:pxToRem(13px);display: flex;flex-wrap: nowrap;justify-content: flex-end;position:relative;top:pxToRem(8px);
          .info-source{ color:#8a8a8a; margin-right:pxToRem(12px);}
          .info-time{ color:#cacaca; }
        }
      }
    }

    /* card-more */
    .card-footer{
      width:100%;height:pxToRem(45px);position:fixed;left:0;bottom:0;
      // .view-more{padding:10px 30px;color:#fff;background-color:#268eff;}
    }

    /deep/.mint-datetime-action{color:#c9242b;}

  }
</style>